<template>
	<!-- 新闻咨询 -->
	<view class="storenotecard" :style="getStyle">

		<!-- 更多 -->
		<view class="more1">
			<view style="display: flex; align-items: center;">
				<image style="width: 50rpx; height: 30rpx;" src="../../static/xinwen.png" mode=""></image>
				<view class="xwzx">{{ datas.name }}</view>
			</view>
			<text class="ckgd" v-show="datas.viewMore1" @click="view_more()">更多<text
					class="gui-icons">&#xe601;</text></text>
		</view>

		<view class="category" style="display: flex;padding: 20rpx; color: #666666; align-items: center;">
			<view>
				<scroll-view class="scroll-view_H" scroll-y="false" scroll-x="true">
					<!-- <view class="scroll-view-item_H" @click="category_change(null)"
						:class="category_index==-1?'CAction':'Action'">
						热点
					</view> -->
					<view class="scroll-view-item_H" @click="category_change(index)"
						v-for="(item,index) in get_categorys" :class="category_index==index?'CAction':'Action'">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<view style="position: absolute; right: 0rpx; padding-right: 22rpx; background-color: white;;"
				@click="showMenu()">
				<image style="width: 50rpx; height: 50rpx;" src="../../static/gengduo.png" mode=""></image>
				<!-- <view style="font-size: 30rpx;line-height: 60rpx;padding: 0rpx 10rpx;
				 background-color: #efefef;border: solid 1rpx #efefef;border-radius: 10rpx;">
					更多</view> -->
				<!-- <img style="width: 50rpx; height: 50rpx; margin-top: 5rpx;" src="../../static/gd.png" alt=""> -->
			</view>
			<view v-if="show_category" style="position: absolute;left: 0rpx;top: 70rpx;padding: 30rpx 30rpx 100rpx 30rpx;
			display: flex;flex-wrap: wrap; background-color: white;border: solid 1rpx #cccccc; width: 90%;z-index: 999999;">
				<checkbox-group name="" @change="cbox_change">
					<view v-for="(item,index) in datas.categorys" style="padding: 10rpx 20rpx;">
						<label>
							<checkbox :value="item.id" :checked="item.checked" /><text>{{item.name}}</text>
						</label>
					</view>
				</checkbox-group>

				<!-- <view v-for="(item,index) in datas.categorys" @click="cateCheck(index)" 
				:class="item.checked?'item_check':''"
				style="padding: 10rpx 20rpx;margin: 6rpx ; white-space: nowrap;border: solid #999999 1rpx;border-radius: 10rpx" >
					{{item.name}}{{item.checked}}
				</view> -->
				<view
					style="position: absolute;bottom: 0rpx;padding: 20rpx;text-align: center;width: 80%; display: flex;justify-content: space-around;">
					<button size="mini" type="primary" @click="cate_ok">确定</button>
					<button size="mini" @click="hideMenu">关闭</button>

				</view>
			</view>
		</view>
		<!-- 没有视频展示默认 -->

		<section :class="[datas.commodityType == 2 ? 'defaultcommodityList2' : '']" class="defaultcommodity">
			<view v-for="(item, index) in datas.imageList" :key="index" class="defaultcommodityList" @tap="click(index)"
				:class="[
          datas.commodityType === 0 ? 'defaultcommodityList0' : '',
          datas.commodityType === 1 ? 'defaultcommodityList1' : '',
          datas.commodityType === 2 ? 'defaultcommodityList2' : '',
          datas.commodityType === 3 ? 'defaultcommodityList3' : '',
          datas.commodityType === 4 ? 'defaultcommodityList4' : '',
          datas.commodityType === 5 ? 'defaultcommodityList5' : '',
        ]" :style="{
          'border-radius': datas.borderRadius + 'rpx',
          border: datas.moditystyle === 2 ? '1rpx solid rgba(50,50,51,0.1)' : '',
		  'border-bottom': datas.moditystyle === 3 ? '1rpx solid #c6c6c6' : '',
		  padding:'20rpx',
		  marginLeft: '-20rpx',
          'box-shadow':
            datas.moditystyle === 1 ? '0 2rpx 8rpx rgba(93,113,127,0.08)' : '',
          width:
            datas.commodityType === 1
              ? 50 - datas.commodityMargin / 6 + 'rpx'
              : datas.commodityType === 2
              ? 33 - datas.commodityMargin / 5 + 'rpx'
              : datas.commodityType === 4
              ? 50 - datas.commodityMargin / 5 + 'rpx'
              : '',
        }">

				<!-- 视频图片 -->
				<view class="imagess" style="position: relative;"
					:class="[datas.positions === 'top' ? 'containoptions' : '']">
					<image :src="item.src!=''?item.src:'@/static/imgs.png'" alt="" mode="aspectFill" class="gui-border"
						style="height: 100%;width: 100%;border-radius: 10rpx;" />
					<!-- 标签 -->
					<text class="marks" v-if="datas.noteLabels"><text>#</text>笔记标签</text>
				</view>

				<!-- 文字内容 -->
				<view class="text" :class="[datas.positions === 'top' ? 'positionsTop' : '']"
					:style="{ background: datas.moditystyle !== 3 ? '#fff' : 'none' }"
					style="color: #000; font-size: 25rpx;">
					<!-- 视频名称 -->
					<h5>{{ item.text }}</h5>
					<!-- 点赞和阅读量 -->
					<view class="dianz">
						<text class="fir" v-if="datas.readingNumber">{{item.reads}} 阅读</text>
						<text v-else></text>
						<view v-show="datas.praisePoints"
							style="display: flex; align-items: center; margin-left: 40rpx;">
							<image style="width: 26rpx; height: 26rpx; margin-bottom: 5rpx;" src="../../static/zan.png"
								mode=""></image>
							<!-- <i class="good-job-o" /> -->
							<view style="margin-left: 8rpx; font-size: 28rpx;">{{item.likes}}</view>
						</view>
					</view>
				</view>
			</view>
		</section>

		<view class="more2" v-show="datas.viewMore2" @click="view_more2">
			查看更多 <i class="gui-icons">&#xe601;</i>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'storenotecard',
		props: {
			datas: {
				type: Object,
				default: function() {
					return {

						text: '文章模块',
						name: '这里显示专题名称', //专题名称
						commodityType: 4, // 选择模板
						moditystyle: 1, // 卡片样式选择
						borderRadius: 9, // 图片边角
						textWeight: 400, // 标题粗细
						noteLabels: false, // 笔记标签
						readingNumber: true, // 阅读数
						praisePoints: false, //点赞数
						viewMore1: true, //更多1
						viewMore2: false, //更多2
						imageList: [],
						positions: 'bottom', //标题位置
						linktype: '10',
						http: {},
						category_id: -1,
						categorys: [{
							label: '分类1',
							id: 1
						}, {
							label: '分类2',
							id: 2
						}, {
							label: '分类3',
							id: 3
						}, {
							label: '分类4',
							id: 4
						}]
					}
				}
			},
		},
		data() {
			return {
				active: 0,
				images: [],
				category_index: 0,
				show_category: false,
				check_cates: [],
				get_categorys: [],
				mainStyle: ""
			}
		},
		computed: {
			// 样式
			getStyle() {
				if (this.datas) {
					console.log('this.datas: ', this.datas);
					let s = {};
					Object.assign(s, this.datas);

					this.mainStyle = this.$comm.getCss(this.datas);

					// console.log("storenotecard->getStyle",this.mainStyle);
				}
				return this.mainStyle;
			}
		},

		created() {

			let imgList = this.datas.imageList
			// console.log("我是imgList:", imgList);
			//uni.setStorageSync("category_index",0);
			let keys = Object.keys(imgList); // 获取对象的所有属性名
			let firstFiveKeys = keys.slice(0, 5); // 获取前五个属性名
			let firstFive = firstFiveKeys.map(key => imgList[key]); // 获取前五个属性的值
			this.datas.imageList = firstFive
			this.set_category();
			console.log("storenotecard", this.datas.imageList);
			this.shuju()
		},

		methods: {
			getnewsIngo() {
				let self = this;
				let data = {
					page_index: 0,
					page_size: 10,
					category_id: '0'
				}
				this.$boya.NGet("/lgzhsys/news", data, (res) => {
					console.log("我是新闻：", res.data.data)
					// self.artciles = [...self.artciles, ...res.data.data]
				})
			},
			view_more() {
				// console.log('this.datas.http.externalLink: ', this.datas.http.externalLink)
				this.$comm.nav_to(this.datas.http.externalLink);
			},
			view_more2() {
				this.$comm.nav_to(this.datas.http.externalLink + "?id=" + this.check_cates[e]);
			},
			category_change(e) {

				this.category_index = e;
				let event = {
					type: 'storenotecard',
					event: {
						type: 'category_change',
						value: this.check_cates[e]
					}
				};
				// console.log('this.category_index: ', this.category_index);
				uni.setStorageSync("category_index", this.category_index);
				this.$emit("childEvent", event);
				console.log('我是event： ', event);
			},
			cateCheck(index) {

				this.datas.categorys[index].checked = !this.datas.categorys[index].checked;


			},
			cate_ok() {
				uni.setStorageSync("check_cates", this.check_cates);

				this.showMenu()
			},
			cbox_change(e) {
				console.log(e);
				this.check_cates = e.detail.value;
			},
			get_style() {

				return this.datas;
			},
			click(index) {
				console.log('tiaozhuan: ', this.datas.imageList[index]);
				this.$emit("nav", {
					name: "storenotecard",
					data: this.datas.imageList[index]
				});
			},
			sort_asc(data) {
				this.get_categorys = data.sort((a, b) => a.sort.orderby - b.sort.orderby)
				this.get_categorys.push()
			},
			set_category() {
				this.get_categorys = [];

				let _cates = uni.getStorageSync("check_cates");
				let self = this;
				for (let k in this.datas.categorys) {
					let d = this.datas.categorys[k];

					this.datas.categorys[k].checked = false;
					for (let key in _cates) {
						if (_cates[key] == d.id) {
							self.check_cates.push(d.id);
							self.get_categorys.push(d);
							this.datas.categorys[k].checked = true;
							break;
						}
					}
				}
				let ci = uni.getStorageSync("category_index");

				if (ci != null) {

					this.category_index = ci;
					//uni.removeStorageSync("category_index");
				}

				this.sort_asc(this.get_categorys)
				// console.log('this.get_categorys：', this.get_categorys);
			},

			shuju() {
				let self = this
				if (self.datas.categorys) {
					if (self.check_cates.length == 0) {
						// console.log('数据', this.datas.categorys);
						if (self.datas.categorys.length > 3) {
							let shuju = self.datas.categorys.slice(0, 3).map(item => item.id);
							uni.setStorageSync("check_cates", shuju);
							// console.log('shujushujushuju: ', shuju);
						}
					}
				}
			},

			showMenu() {
				this.show_category = !this.show_category;
				this.set_category();
			},
			hideMenu() {
				this.show_category = false
			},
			tap(e) {
				var id = e.currentTarget.dataset.id;
				uni.showToast({
					title: '您点击了菜单 : ' + id,
					icon: "none"
				});
				this.$refs.gracePopupMenu.close();
			}
		},
	}
</script>

<style scoped lang="less">
	.scroll-view_H {
		// white-space: nowrap;
		width: 545rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		background-color: white;
	}

	.scroll-view-item_H {
		padding: 0rpx 20rpx;
		white-space: nowrap;
		padding-bottom: 15rpx;
		font-size: 30rpx;
		display: inline-block;
		margin-left: 15rpx;
		margin-right: 15rpx;
		// width: 100rpx;
		// height: 300rpx;
		// line-height: 300rpx;
		text-align: center;
		background-color: white;
	}

	.item_check {
		background-color: #4CAF50;
		color: white;
	}

	.storenotecard {
		position: relative;
		box-shadow: 3rpx 5rpx 8rpx rgba(0, 0, 0, 0.2), -3rpx -1rpx 8rpx rgba(0, 0, 0, 0.2);

		.category {
			font-size: 25rpx;
		}

		.CAction {
			// font-weight: bold;
			// background-color: red;
			color: black;
			padding-top: 10rpx;
			border-bottom: 4rpx solid #1C95F1;
			// border-radius: 8rpx;
			// color: red !important;
			// border-bottom: solid 1rpx red;
		}

		.Action {
			color: #B2B3B5;
			padding-top: 10rpx;
			border-radius: 8rpx;
		}

		/* 更多1 */
		.more1 {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #f5f5f5;


			h4 {
				font-size: 25rpx;
				color: #323233;
				font-weight: 400;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.xwzx {
				font-size: 30rpx;
				color: black;
				margin-left: 8rpx;
			}

			.ckgd {
				color: #969799;
				font-size: 24rpx;
				display: flex;
				align-items: center;
			}
		}

		/* 更多2 */
		.more2 {
			text-align: center;
			color: #969799;
			font-size: 24rpx;
			padding: 20rpx 0rpx;
		}

		/* 默认商品 */
		.defaultcommodity {
			box-sizing: border-box;
			margin: 1px;
			padding: 0 15px;

			/* 横向滑动 */
			&.defaultcommodityList2 {
				overflow: scroll;
				display: flex;

				/* 滚动条 */
				&::-webkit-scrollbar {
					height: 1rpx;
				}

				&::-webkit-scrollbar-thumb {
					background-color: #155bd4;
				}

				/deep/.el-collapse-item__header,
				/deep/.el-collapse-item__wrap {
					border-bottom: 0 !important;
				}
			}

			/* 卡片列表 */
			.defaultcommodityList {
				position: relative;
				margin-bottom: 15rpx;
				overflow: hidden;
				display: inline-flex;
				flex-direction: column;

				/* 大图模式 */
				&.defaultcommodityList0 {
					width: 100%;

					/* 标签 */
					.containoptions {
						.marks {
							bottom: 33rpx;
							z-index: 3;
						}
					}

					image {
						height: 147rpx;

					}

					/* 文字在图片中 */
					.positionsTop {
						position: absolute;
						display: flex;
						flex-direction: column-reverse;
						left: 0;
						bottom: 0;
						background: none !important;
						// background-image: linear-gradient(to bottom,
						// 		transparent,
						// 		rgba(0, 0, 0, 0.5)) !important;

						/* 标题 */
						h5 {
							color: #fff;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						text {
							color: #fff;
						}

						/* 点赞和阅读量 */
						.dianz {
							padding-left: 190rpx;
						}
					}
				}

				/* 一行两个 */
				&.defaultcommodityList1 {
					width: 48%;

					&:nth-of-type(even) {
						margin-left: 4%;
					}
				}

				/* 横向滑动 */
				&.defaultcommodityList2 {
					width: 150rpx;
					flex: none;
					margin-right: 5%;
				}

				/* 一大两小 */
				&.defaultcommodityList3 {
					display: flex;

					&:nth-of-type(3n-2) {
						margin-bottom: 0 !important;

						.marks {
							bottom: 33rpx;
							z-index: 3;
						}

						image {
							height: 147rpx;
						}

						/* 文字在图片中 */
						.text {
							position: absolute;
							display: flex;
							flex-direction: column-reverse;
							left: 0;
							bottom: 0;
							background: none !important;
							background-image: linear-gradient(to bottom,
									transparent,
									rgba(0, 0, 0, 0.5)) !important;

							/* 标题 */
							h5 {
								color: #fff;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							text {
								color: #fff;
							}

							/* 点赞和阅读量 */
							.dianz {
								padding-left: 190rpx;
							}
						}
					}

					&:nth-of-type(3n) {
						flex-direction: row-reverse;
						margin-bottom: 15rpx;

						.imagess {
							width: 65rpx !important;
							height: 67rpx;
							z-index: 99;
							position: absolute !important;
							top: 10%;
							right: 10rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.marks {
							left: 0;
							background: #fff;
							opacity: 0.85;
							bottom: 0;
						}

						.text {
							width: 100%;
							padding: 10rpx 80rpx 10rpx 10rpx;
							min-height: 87rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.dianz {
								justify-content: start;
								line-height: 20rpx;

								text {
									&.fir {
										margin-right: 30rpx;
									}
								}
							}
						}
					}

					&:nth-of-type(3n-1) {
						flex-direction: row-reverse;
						margin-bottom: 0;
						border-bottom: 1rpx solid #e5e5e5;
						border-top: 1rpx solid #e5e5e5;

						.marks {
							left: 0;
							bottom: 0;
							background: #fff;
							opacity: 0.85;
						}

						.imagess {
							width: 65rpx !important;
							height: 67rpx;
							z-index: 99;
							position: absolute !important;
							top: 10%;
							right: 10rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.text {
							width: 100%;
							padding: 10rpx 80rpx 10rpx 10rpx;
							min-height: 87rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.dianz {
								justify-content: start;
								line-height: 20rpx;

								text {
									&.fir {
										margin-right: 30rpx;
									}
								}
							}
						}
					}

					&:nth-of-type(3n) {
						flex-direction: row-reverse;
					}
				}

				/* 详细列表 */
				&.defaultcommodityList4 {
					width: 100%;
					flex-direction: row-reverse;
					margin-bottom: 10rpx;

					.imagess {
						width: 200rpx !important;
						height: 140rpx;
						z-index: 99;
						position: absolute !important;
						top: 9%;
						right: 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.marks {
						left: 0;
						background: #fff;
						opacity: 0.85;
						bottom: 0;
					}

					.text {
						width: 100%;
						padding: 10rpx 138rpx 10rpx 10rpx;
						// min-height: 145px;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.dianz {
							justify-content: start;

							text {
								&.fir {
									margin-right: 30rpx;
								}
							}
						}
					}
				}

				/* 标签 */
				.marks {
					position: absolute;
					bottom: 10rpx;
					left: 13rpx;
					font-size: 25rpx;
					padding: 2rpx 5rpx;
					background: #fff;
					opacity: 0.85;
					border-radius: 3rpx;

					text {
						color: #d40;
					}
				}

				/* 图片 */
				image {
					width: 100%;
					display: block;
					overflow: hidden;
				}

				/* 文字 */
				.text {
					padding: 10rpx 10rpx 0;
					width: 100%;
					box-sizing: border-box;

					/* 商品名称 */
					h5 {
						font-size: 30rpx;
						line-height: 40rpx;
						margin: 0 0 10rpx;
						font-weight: 400;
						width: 82%;
						display: -webkit-box;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					/* 点赞和阅读量 */
					.dianz {
						display: flex;
						justify-content: space-between;
						line-height: 45rpx;

						text {
							font-size: 25rpx;
							display: flex;
							align-items: center;

							.van-icon-good-job-o {
								margin-right: 5rpx;
							}
						}
					}
				}
			}
		}
	}
</style>